<template>
  <el-dialog
    title="预览文章"
    :visible.sync="previewVisible"
    width="65%"
    :before-close="close"
  >
    <h3>{{details.title}}</h3>
    <div><span>{{disponseTime(details.createTime)}}</span>&emsp;
    <span>{{details.username}}</span>&emsp;
    <i class="el-icon-view"></i>&nbsp;{{details.visits}}
    </div>
    <div class="content" v-html="details.articleBody"></div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    id: {
      required: true
    },
    details: {
      type: Object
    }
  },
  data () {
    return {
      previewVisible: false
    }
  },
  methods: {
    close () {
      this.previewVisible = false
    },
    disponseTime (str) {
      return str?.split('.')[0].replace(/T/, ' ')
    }
  }
}
</script>

<style scoped lang="less">
h3 {
 font-size: 21px;
 line-height: 30px;
 margin: 0;
}
.content {
  border-top: 1px dashed #ccc;
  margin-top: 8px;
  background: #f5f5f5;
  padding: 10px;
}
</style>
